<template>
	<view>
		<view :style="{ height: navBarHeight + 'px' }" class="custom-nav-bar">
			<!-- 用户头像 -->
			<view class="user-avatar">
				<up-icon class="user-avatar_img" size="20" :bold="true" name="close" @click="goBack"></up-icon>
			</view>
			<view class="nav-title">{{taskName.slice(0, -4)}}</view>
		</view>
		<!-- 标签页，使用 fixed 定位固定在顶部，位于导航栏下方 -->
		<view class="up-detail-container" :style="{top:navBarHeight + 'px'}">
			<up-tabs class="up-tabs_detail" :current='currentIndex' :list="list1" :activeStyle="{
		                    color: '#303133',
		                    fontWeight: 'bold',
		                    transform: 'scale(1.05)'
		                }" :inactiveStyle="{
		                    color: '#606266',
		                    fontWeight: 'bold',
		                    transform: 'scale(1)'
		                }" @click="click">
				<template #right>
					<view style="padding-left: 4px;display: flex;gap: 2px;">
						<up-button v-if="isEditContent" @click="saveContent" type="primary" size="small" text="">保存</up-button>
						<up-button @click="showIsEdit" type="primary" size="small" text="">{{isEditContent?'返回' : '编辑'}}</up-button>
						<up-button v-if="!isEditContent" @click="gotoMind" type="primary" size="small" text="思维导图">思维导图</up-button>
					</view>
				</template>
			</up-tabs>
		</view>
		<!-- 页面内容，设置了顶部内边距以避免被固定元素遮挡 -->
		<view class="page-content" :style="{paddingTop: textareaHeight + 'px'}">
			<view class="content_detail">
				<view v-show="showResult==0" class="detail_text" ref="detailTextRef">
					<up-textarea v-if="isEditContent" class="textarea" v-model="resText" placeholder="展示结果" border="bottom" :height="textHeight" :maxlength="-1"></up-textarea>
					<zero-markdown-view v-else :markdown="newResText"></zero-markdown-view>
				</view>

				<!-- <view v-else-if="showResult===1" class="detail_MindMap">
		                     <mind-map :data="mindData" :width="400" :height="500" />
		                </view> -->

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		onMounted,
		onUnmounted,
		reactive,
		nextTick
	} from 'vue';
	import {
		useAuthStore
	} from '@/store/index.js';
	import {
		listAiTask,
		getAiTask,
		getMindMap,
		updateAiTask
	} from '../../api/index.js';
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app' // 新增引入
	import mindMap from '@/components/mind-map/mind-map.vue'

	const navBarHeight = ref(0);
	const userStore = useAuthStore();
	const taskId = ref('') // 创建响应式变量
	const taskName = ref('')
	const resText = ref(
		'仅嗯嗯两个简单表述，信息过少，没有具体会议相关内容。请你提供实际的会议录音转文字内容、会议主题等相关信息，以便我提炼关键信息、形成会议纪要。 asdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdf'
	)
	const newResText = ref('')
	const isEditContent = ref(false)
	// 创建响应式数据 
	const list1 = reactive([{
			name: '会议总结'
		},
		// { name: '思维导图' },
	]);
	const currentIndex = ref(0)
	const showResult = ref(0)
	const detailTextRef = ref(null)
	const textareaHeight = ref(0)
	const textHeight = ref(0)
	const tabsHeight = ref(0)
	const systemHeight = ref(0)

	const mindDataObj = ref()
	const mindData = ref()

	const showMindMap = ref(true);

	onLoad((options) => {
		// 每次进入页面都重置 currentIndex
		currentIndex.value = 0;
		showResult.value = 0;
		// 从路由参数获取 taskId
		if (options.taskId) {
			taskId.value = options.taskId
			taskName.value = options.taskName
			mindData.value = JSON.parse(options.taskMindMap)
			mindDataObj.value = JSON.parse(options.taskMindXxcMap)
			loadTaskDetail(taskId.value)
			// 这里可调用获取详情的接口
		}
	})

	const goBack = () => {
		uni.navigateBack()
		closeMindBox()
	}

	// 获取详情方法示例
	const loadTaskDetail = async (id) => {
		await getDetail(id)
	}

	// 定义方法  
	const click = (item) => {
		currentIndex.value = item.index;
		if (item.index === 0) {
			showResult.value = 0
		}
		// else if(item.index===1){
		// 	showResult.value = 1
		// }
	}
	
	const showIsEdit = () => {
		isEditContent.value = !isEditContent.value
		resText.value = newResText.value
	}
	
	const saveContent = async () => {
		const {
			data
		} = await updateAiTask({
			userId: userStore.userId,
			taskId: taskId.value,
			taskContent: resText.value
		})
		if (data.code == 200) {
			uni.showToast({
				title: '修改成功',
				icon: 'none'
			});
			await getDetail(taskId.value)
			isEditContent.value = false
			
		} else {
			uni.showToast({
				title: data.msg,
				icon: 'fail',
				icon: 'none'
			})
		}
	}

	const gotoMind = () => {
		uni.navigateTo({
			url: '/pages/list/MindMap?mindData=' + taskId.value + '&userId=' + userStore.userId
		});
	}

	/** 获取详情信息 */
	const getDetail = async (id) => {
		const res = await getAiTask(id)
		if (res.data.code == 200) {
			resText.value = res.data.data.taskContent;
			newResText.value = resText.value
		} else {
			uToastRef.value.show({
				type: 'error',
				icon: false,
				message: res.data.msg,
				title: res.data.msg
			});
		}
	};

	const closeMindBox = () => {
		showMindMap.value = false;
		mindData.value = null;
	};

	onReady(() => {
		// 获取系统窗口高度
		const systemInfo = uni.getSystemInfoSync()
		nextTick(() => {
			// 获取 tabs 组件高度
			uni.createSelectorQuery()
				.select('.up-detail-container')
				.boundingClientRect(rect => {
					tabsHeight.value = rect.height
					// 计算文本域高度
					textareaHeight.value =
						navBarHeight.value +
						tabsHeight.value
					textHeight.value = systemHeight.value - navBarHeight.value - tabsHeight.value - 70 // 额外减点边距
				})
				.exec()

			// 监听窗口变化
			uni.onWindowResize(() => {
				const newSystemInfo = uni.getSystemInfoSync()
				textareaHeight.value =
					navBarHeight.value +
					tabsHeight.value
			})
		})
	})

	onMounted(async () => {
		uni.$emit('stopListWatch'); // 通知列表页面停止监听
		uni.$emit('stopHomeWatch'); // 通知列表页面停止监听
		try {
			const res = await uni.getSystemInfo();
			systemHeight.value = res.windowHeight // 注意这里是 windowHeight，不要写成 screenHeight
			// 获取状态栏高度（刘海高度）
			const statusBarHeight = res.statusBarHeight;
			// 标准导航栏高度，一般为 44px（iOS）或 48px（Android）
			const defaultNavBarHeight = res.platform === 'ios' ? 44 : 48;
			// 计算自定义导航栏的高度
			navBarHeight.value = statusBarHeight + defaultNavBarHeight;
		} catch (error) {
			console.error('获取设备信息失败:', error);
		}
	});
</script>

<style>
	.custom-nav-bar {
		/* position: relative; */
		position: fixed;
		/* 固定在顶部 */
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		/* 设置 z-index 确保在其他元素之上 */
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		/* border-bottom: 1px solid #EEEEEE; */
	}

	.nav-title {
		font-size: 19px;
		font-weight: bold;
		text-align: center;
		position: absolute;
		bottom: 10px;
		/* width: 30%; */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 50vw;
	}

	.user-avatar {
		position: absolute;
		left: 15px;
		bottom: 10px;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: baseline;
	}

	.user-avatar_item {
		margin-left: 2px;
		font-size: 20px;
		font-weight: 700;
	}

	.up-detail-container {
		position: fixed;
		/* 固定在顶部，位于导航栏下方 */
		/* 使用 CSS 变量，根据导航栏高度调整位置 */
		left: 0;
		right: 0;
		background-color: white;
		/* 设置背景颜色，避免内容滚动到下方时显示异常 */
		z-index: 20;
		/* 设置 z-index 确保在其他元素之上 */
	}

	.up-tabs_detail {
		padding: 10px;
		/* 添加内边距 */
	}

	.page-content {
		flex: 1;
		padding-bottom: 20px;
	}

	/* .content_detail {
		padding: 0 20px;
	} */

	.detail_text {
		flex: 1;
		/* 自动填充剩余空间 */
		min-height: 100px;
		/* 设置最小高度 */
	}

	::v-deep .u-textarea--disabled {
		background-color: #fff !important;
	}
	
	::v-deep .zero-markdown-view, .textarea {
		padding: 10px !important;
		position: relative;
		background-color: #fff;
		border-radius: 15px !important;
		margin: 10px 0;
	}
	
	::v-deep .u-textarea {
		padding: 10px 15px !important;
	}
	
	::v-deep .u-textarea__field {
		letter-spacing: 0.2em;
		word-spacing: 0.1em;
		line-height: 1.75;
		color: #000 !important;
	}
</style>